<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

</style>
</head>
<body>
<div>
	<select name="" id="province">
		<option value="">请选择</option>
	</select>
	<select name="" id="city">
		<option value="">请选择</option>
	</select>
	<select name="" id="county">
		<option value="">请选择</option>
	</select>
</div>
<script src="city.js"></script>
<script>
function $(s){
	return document.querySelectorAll(s);
}
var province=$("#province")[0],
city=$("#city")[0],
county=$("#county")[0];
var _data={}

function createData(ele,arr,type){
	//参数：ele-select元素，arr-要生成列表的数组，type-特定参数（因为县城数组直接访问索引，不能通过name访问，需要分支判断type）
	ele.innerHTML="<option value=''>请选择</option>";
	for(var i=0;i<arr.length;i++){
		var str=type==1?arr[i]:arr[i].name;//将获取到的名字用变量表示，type是1的时候，代表县城名称，直接访问索引，否则代表省或者市，要访问name
		ele.innerHTML+="<option value=\""+str+"\">"+str+"</option>";
	}
}
createData(province,cityData);//初始化省份列表
province.onchange=function(){
	var val=this.value;
	for(var i=0;i<cityData.length;i++){
		if(val==cityData[i].name){//遍历整个数组，找到数组中第一级name和选择的省份相同的项
			if(cityData[i].city&&cityData[i].city.length>0){
				//获取的城市数组，就是cityData[i].city，如果存在并且有数据，生成城市列表
				createData(city,cityData[i].city);
			}else{//如果没有城市数组，或者数组是空的，保留城市列表的默认值
				city.innerHTML="<option value=''>请选择</option>";
			}
		}
	}
	_data.province=val;//将选择的省份传递给_data
	county.innerHTML="<option value=''>请选择</option>";//清空县城列表，保留默认值
}
city.onchange=function(){
	for(var i=0;i<cityData.length;i++){
		var c=cityData[i].city;//遍历整个数组，找到城市数组
		for(var j=0;j<c.length;j++){
			if(c[j].name==this.value){//遍历城市数组，找到数组中第二级name和选择的城市相同的项
				//c[j].districtAndCounty   获取到县城的数组
				createData(county,c[j].districtAndCounty,1);//生成县城列表
			}
		}
	}
	_data.city=this.value;//将选择的城市传递给_data
}
county.onchange=function(){
	_data.county=this.value;////将选择的县城传递给_data
}
</script>	
</body>
</html>